<script setup>
    import {ref, computed} from 'vue'
    import {useAllDataStore} from '../stores'
    import { useRouter,useRoute } from 'vue-router'

    //根据登录账户的不同，动态的显示左侧导航栏
    //根据登录用户的不同，左侧导航区动态显示菜单数量
    const List = computed(()=> store.state.menuList)
       
    let hasChilden = computed(() => {
        return List.value.filter(item => item.children)
    })
    let noChilden = computed(() => {
        return List.value.filter(item => !item.children)
    })

    const store = useAllDataStore()
    const isCollapse = computed(() => store.state.isCollapse)
    const width = computed(() => store.state.isCollapse ? '64px' : '200px')

    const router = useRouter()
    const route = useRoute()

    //动态处理高亮
    const activeMenu = computed(()=> {
        route.path
    })
    const handleMenu = (item)=>{
        router.push(item.path)
        store.selectMenu(item)
    }


</script>

<template>
    <el-aside :width="width">
        <!-- :collapse-transition="false" 关闭左侧导航栏的伸缩动画 -->
        <el-menu
            background-color="#545c64"
            text-color="#fff"
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="activeMenu">
            <!-- 上面的第8行与第111行相关，这个方法default-active还有待学习 -->
            <!-- <img src="../assets/logo.svg" alt="logo" style="width: 60px; display: flex;"> -->
            <h3 v-show="!isCollapse">后台管理系统</h3>
            <h3 v-show="isCollapse">后台</h3>
            <el-menu-item 
                v-for="item in noChilden"
                :index="item.path"
                :key="item.path"
                @click="handleMenu(item)"
                >
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </el-menu-item>

            <!-- 有二级菜单的是el-sub-menu -->
            <el-sub-menu 
                v-for="item in hasChilden"
                :index="item.path"
                :key="item.path"
                
                >
                <template #title>
                    <component class="icons" :is="item.icon"></component>
                    <span>{{item.label}}</span>
                </template>
                <el-menu-item-group title="Group One">
                    <el-menu-item index="/otherPage1"
                    v-for="subItem in item.children"
                    :index="subItem.path"
                    :key="subItem.path"
                    @click="handleMenu(subItem)"
                    >
                        <component class="icons" :is="subItem.icon"></component>
                        <span>{{subItem.label}}</span>
                        
                    </el-menu-item>
                    <!-- <router-view></router-view> -->
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
    
</template>

<style lang="less" scoped>
.icons{
    margin-right: 5px;
    width: 18px;
    height: 18px;
    
}
.el-menu{
    border-right: none;
    h3{
        line-height: 48px;
        color: #fff;
        text-align: center;
    }
}
.el-aside{
    background-color: #545c64;
    height: 100%;
}
</style>